﻿<%@page import="com.zaofan.constant.LableConstant" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@page import="java.util.List" %>
<%@page import="com.zaofan.bean.Lable" %>
<%@page import="com.zaofan.cache.CacheManage" %>
<%@page import="com.zaofan.bean.Admin" %>
<%@page import="com.zaofan.bean.AdminType" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
    String contextPath = request.getContextPath();
    Admin admin = (Admin) session.getAttribute("admin");
    if (admin == null) {
        response.sendRedirect(contextPath + "/login.jsp?state=" + "session-invalid");
        return;
    }
    if (admin.getType() != AdminType.admin.ordinal() && admin.getType() != 4) {
        response.sendRedirect(contextPath + "/login.jsp?state=" + "session-invalid");
        return;
    }
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>广告列表</title>
    <link href="<%=contextPath%>/admin/css/base.css" rel="stylesheet"/>
    <link href="<%=contextPath%>/admin/assets/css/bootstrap.min.css"
          rel="stylesheet"/>
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/font-awesome.min.css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="<%=contextPath%>/admin/assets/css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/ace.min.css"/>
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/ace-skins.min.css"/>
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="<%=contextPath%>/admin/assets/css/ace-ie.min.css"/>
    <link rel="stylesheet" href="<%=contextPath%>/admin/css/uploadify.css" />
    <![endif]-->
    <script src="<%=contextPath%>/admin/assets/js/ace-extra.min.js"></script>
    <!--[if lt IE 9]>
    <script src="<%=contextPath%>/admin/assets/js/html5shiv.js"></script>
    <script src="<%=contextPath%>/admin/assets/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/jquery-ui-1.10.3.custom.min.css"/>
    <link rel="stylesheet"
          href="<%=contextPath%>/admin/assets/css/chosen.css"/>
    <script type="text/javascript">
        var contextPath = '<%=contextPath%>';
    </script>
</head>
<body style="background-color: #fff;">
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>
    <ul class="breadcrumb" style="padding: 20px; color: #3a87ad;">
    </ul>
</div>
<div class="page-content">
    <div class="row" style="height: 100%">
        <div class="col-xs-12">

            <button type="button" class="btn btn-primary" id="addAd">增加</button>
            <style>
                .table-responsive table th tr {
                    text-align: center;
                }
            </style>
            <div class="table-responsive">
                <input type="hidden" value="1" id="start"/>
                <table id="sample-table-2"
                       class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th style="text-align: center;">编号</th>
                        <th style="text-align: center;">城市</th>
                        <th style="text-align: center;">名称</th>
                        <th style="text-align: center;">图片</th>
                        <th style="text-align: center;">描述</th>
                        <th style="text-align: center;">位置</th>
                        <th style="text-align: center;width:200px;">类型</th>
                        <th style="text-align: center;">排序</th>
                        <th style="text-align: center;">状态</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                    </thead>
                    <tbody id="data-list" style="text-align: center;">
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-sm-6">
            <div id="sample-table-2_info" class="dataTables_info">
                当前 <span id="current"> </span> 到 <span id="page"></span> 总共 <span
                    id="total"></span> 条
            </div>
        </div>
        <div class="col-sm-6">
            <div class="dataTables_paginate paging_bootstrap">
                <ul class="pagination pagination-sm" id="page-list">
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="loading"
     style="width: 32px; height: 32px; position: fixed; left: 40%; top: 40%; display: none;">
    <img src="<%=contextPath%>/admin/assets/css/images/loading.gif"
         width="32" height="32"/>
</div>
<div class="popover"
     style="z-index: 9999; width: 150px; position: fixed; left: 40%; top: 40%;">
    <div class="arrow"></div>
    <div class="popover-inner">
        <h3 class="popover-title">操作提示</h3>
        <div class="popover-content" id="popover-content">
            <p>操作成功</p>
        </div>
    </div>
</div>
<%
    List<Lable> lables = CacheManage.lables.get(LableConstant.lable_ad_postion);
    application.setAttribute("position", lables);
    application.setAttribute("adtypes", CacheManage.lables.get(LableConstant.lable_ad_type));
%>
<div id="adEditBox"
     style="display: none; z-index: 99; width: 600px; position: fixed; left: 15%; top: 5%; border: 1px solid #ccc; border-radius: 4px !important;">
    <div class="arrow"></div>
    <div class="popover-inner" style="">
        <h3 class="popover-title" id="">广告增加</h3>
        <div class="popover-content" id="" style="background-color: #F5F5F5;">
            <form class="form-horizontal" style="padding-top: 10px;"
                  method="post" id="adForm" enctype="multipart/form-data">
                <input type="hidden" id="id" name="id" value=""/> <input
                    type="hidden" id="action" value=""/>
                <div class="form-group">
                    <label class="col-sm-2 control-label">城市：</label>
                    <%--<input type="hidden" value="" name="endDate" id="endDate" />--%>
                    <div class="col-sm-9">
                        <select id="cityId" name="cityId" class="form-control">
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">广告标题：</label>
                    <div class="col-sm-9">
                        <input class="form-control" name="title" id="title"></input>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">简单描述：</label>
                    <div class="col-sm-9">
                        <input class="form-control" name="info" id="info"></input>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">位置：</label>
                    <div class="col-sm-9">
                        <c:forEach items="${position }" var="p">
                            <c:choose>
                                <c:when test="${p.code == e.positionLable}">
                                    <input type="radio" checked="checked" name="positionLable"
                                           value="${p.code }"/>${p.name }&nbsp;&nbsp;
                                </c:when>
                                <c:otherwise>
                                    <input type="radio" name="positionLable"
                                           value="${p.code }"/>${p.name }&nbsp;&nbsp;
                                </c:otherwise>
                            </c:choose>

                        </c:forEach>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">类型：</label>
                    <div class="col-sm-9">
                        <c:forEach items="${adtypes }" var="t">
                            <c:choose>
                                <c:when test="${t.code == e.typeLable}">
                                    <input  type="radio" name="typeLable" checked="checked" class="myradio" onchange="bigtoggle($(this).val())"
                                           value="${t.code }"/>${t.name }&nbsp;&nbsp;
                                </c:when>
                                <c:otherwise>
                                    <input  type="radio" name="typeLable" class="myradio" onchange="bigtoggle($(this).val())"
                                           value="${t.code }"/>${t.name }&nbsp;&nbsp;
                                </c:otherwise>
                            </c:choose>

                        </c:forEach>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label" >属性：</label>
                    <div class="col-sm-9">
                        <input class="form-control"   name="attribute" id="attribute"></input>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group" id="bigImageDiv">
                    <label for="" class="col-sm-2 control-label">大图图片：</label>
                    <div class="col-sm-9">
                        <input type="file" id="bigImage"/>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>

                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">排序：</label>
                    <div class="col-sm-9">
                        <input class="form-control" name="sort" id="sort"></input>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-2 control-label">图片：</label>
                    <div class="col-sm-9">
                        <input type="file" name="picture" id="picture"></input>
                        <br/>
                        <img src="" id="img" style="display:none" width="100" height="50"/>
                    </div>
                    <span class="input_tip" style="line-height: 30px;">*</span>
                </div>




            </form>
        </div>
        <div class="popover-footer"
             style="background-color: #F5F5F5; overflow: hidden; text-align: center;">
            <button type="button" class="btn btn-primary"
                    style="padding: 0px; margin: 0px 5px 5px 0px;" id="cancel">
                <i class="icon-ok"></i>取消
            </button>
            <button type="button" class="btn btn-danger"
                    style="padding: 0px; margin: 0px 5px 5px 0px;" id="save">
                <i class="icon-edit"></i>保存
            </button>

        </div>
    </div>
</div>

<script type="text/javascript">
    if ("ontouchend" in document)
        document
                .write("<script src='<%=contextPath%>/admin/assets/js/jquery.mobile.custom.min.js'>"
                        + "<" + "/script>");
</script>
<script type="text/javascript">
    window.jQuery
    || document
            .write("<script src='<%=contextPath%>/admin/assets/js/jquery-2.0.3.min.js'>"
                    + "<" + "script>");
</script>

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<%=contextPath%>/admin/assets/js/jquery-1.10.2.min.js'>" + "<" + "script>");
</script>
<![endif]-->
<script type="text/javascript">
    if ("ontouchend" in document)
        document
                .write("<script src='<%=contextPath%>/admin/assets/js/jquery.mobile.custom.min.js'>"
                        + "<" + "script>");
</script>
<script src="<%=contextPath%>/admin/assets/js/bootstrap.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/typeahead-bs2.min.js"></script>

<!--[if lte IE 8]>
<script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script
        src="<%=contextPath%>/admin/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script
        src="<%=contextPath%>/admin/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/jquery.slimscroll.min.js"></script>
<script
        src="<%=contextPath%>/admin/assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/jquery.sparkline.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/ace-elements.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/ace.min.js"></script>
<script src="<%=contextPath%>/admin/js/common.js"></script>
<script src="<%=contextPath%>/admin/js/jquery.uploadify.min.js"></script>
<script src="<%=contextPath%>/admin/assets/js/jquery-form.js"></script>
<script
        src="<%=contextPath%>/admin/assets/js/jquery.dataTables.bootstrap.js"></script>
<script
        src="<%=contextPath%>/admin/assets/js/jquery.dataTables.bootstrap.js"></script>
<script
        src="<%=contextPath%>/admin/assets/js/date-time/bootstrap-datepicker.min.js"></script>


<script type="text/javascript">
    $.ajax({
        url: contextPath + '/city',
        type: "POST",
        dataType: 'json',
        async: false,
        data: {
            action: 'list',
            order: ' by sort asc'
        },
        success: function (rs, textStatus, jqXHR) {
            if (rs.success) {
                var data = rs.data;
                var options = "";
                for (var i = 0; i < data.length; i++) {
                    options += '<option value="' + data[i].id + '">' + data[i].cityName + '</option>';
                }
                $("#cityId").append(options);
            } else {
                showMessage("获取数据失败,请稍后再试");
            }
            $("#loading").hide();

        },
        error: function () {
            $("#loading").hide();
            showMessage("请稍后再试");
        }
    });
    $(function () {
        init();
    });
    function init() {
        getData(1);
    }

    function getData(start) {
        $("#loading").show();
        $.ajax({
            url: contextPath + '/banner',
            type: "POST",
            dataType: 'json',
            data: {
                action: 'list',
                begin: (start - 1) * pageSize,
                end: pageSize,
                order: " by addTime desc"
            },
            success: function (rs, textStatus, jqXHR) {
                if (rs.success) {
                    var data = rs.data;
                    var total = rs.total;
                    var dataList = $("#data-list");
                    dataList.empty();
                    $("#total").text(total);
                    $("#current").text((start - 1) * pageSize + 1);
                    if (data.length > 0) {
                        $("#page").text(
                                (start - 1) * pageSize + data.length);
                        parseData(data, total, start);
                    } else {
                        showMessage("无数据");
                    }
                } else {
                    showMessage("获取数据失败,请稍后再试");
                }
                $("#loading").hide();

            },
            error: function () {
                $("#loading").hide();
                showMessage("请稍后再试");
            }
        });
    }

    function parseData(data, total, start) {
        var dataList = $("#data-list");
        var tr = "";
        for (var i = 0; i < data.length; i++) {
            tr += '<tr>';
            tr += '<td>' + data[i].id + '</td>';
            tr += '<td>' + data[i].cityId + '</td>';
            tr += '<td>' + data[i].title + '</td>';
            tr += '<td><a href="' + contextPath + data[i].picture + '" target="_blank"><img style="max-width: 100px;max-height: 100px;" alt="" src="' + contextPath + data[i].picture + '"/></a></td>';
            tr += '<td>' + data[i].info + '</td>';
            if (data[i].positionLable == "banner") {
                tr += '<td>首页轮播</td>';
            } else if (data[i].positionLable == "fourad") {
                tr += '<td>首页四张广告图</td>';
            } else if (data[i].positionLable == "centerad") {
                tr += '<td>首页中部广告</td>';
            } else if (data[i].positionLable == "activityad") {
                tr += '<td>首页弹出广告</td>';
            } else if (data[i].positionLable == "shopad") {
                tr += '<td>商城轮播</td>';
            }

            else {
                tr += '<td>其他</td>';
            }
            if (data[i].typeLable == "ad") {
                tr += '<td style="width:200px;">广告地址:';
                if (data[i].linkUrl.length > 100) {
                    tr += data[i].linkUrl.substring(0, 100) + "....";
                } else {
                    tr += data[i].linkUrl;
                }
                tr += '</td>';
            } else if (data[i].typeLable == "adproduct") {
                tr += '<td style="width:200px;">产品id:' + data[i].linkId + '</td>';

            } else if (data[i].typeLable == "adpage") {
                tr += '<td style="width:200px;">跳转页面:' + data[i].pageCode + '</td>';
            } else if (data[i].typeLable == "adshop") {
                tr += '<td style="width:200px;">商家id:' + data[i].linkId + '</td>';
            } else if (data[i].typeLable == "none") {
                tr += '<td style="width:200px;">无效果</td>';
            } else {
                tr += '<td style="width:200px;">其他</td>';
            }
            tr += '<td>' + data[i].sort + '</td>';

            if (data[i].state == 0) {
                tr += '<td><span class="label label-success">显示</span></td>';
                tr += '<td><input type="hidden" value="' + data[i].id + '" class="adId"/><button type="button" class="btn btn-primary btn-xs edit">编辑</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs state">关闭</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs del">删除</button></td>';
            } else {
                tr += '<td><span class="label label-danger">隐藏</span></td>';
                tr += '<td><input type="hidden" value="' + data[i].id + '" class="adId"/><button type="button" class="btn btn-primary btn-xs edit">编辑</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs state">显示</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs del">删除</button></td>';
            }
        }
        dataList.append(tr);

       $(".edit").bind("click", function () {
            var id = $(this).parent().find("input.adId").val();
            $("#loading").show();
            $.ajax({
                url: contextPath + '/banner',
                type: "POST",
                dataType: 'json',
                data: {
                    action: 'get',
                    id: id
                },
                success: function (rs, textStatus, jqXHR) {
                    if (rs.success) {
                        $("#adEditBox").show();
                        var data = rs.data;
                        $("#action").val("update");
                        $("#id").val(data.id);
                        $("#cityId").val(data.cityId);
                        $("#title").val(data.title);
                        $("#info").val(data.info);
                        $("input[name='positionLable'][value='" + data.positionLable + "']").prop("checked", "checked");
                        $("input[name='typeLable'][value='" + data.typeLable + "']").prop("checked", "checked");

                        $("#sort").val(data.sort);
                        if (data.typeLable == "ad") {
                            $("#attribute").val(data.linkUrl);
                        } else if (data.typeLable == "adproduct") {
                            $("#attribute").val(data.linkId);
                        } else if (data.typeLable == "adpage") {
                            $("#attribute").val(data.pageCode);
                        } else if (data.typeLable == "adshop") {
                            $("#attribute").val(data.linkId);
                        }
                        $("#img").show();
                        $("#img").attr("src", contextPath + data.picture)
                        bigtoggle(data.typeLable);
                    } else {
                        showMessage(rs.msg);
                    }
                    $("#loading").hide();
                },
                error: function () {
                    $("#loading").hide();
                    showMessage("请稍后再试");
                }
            });
        });

        $(".state").bind("click", function () {
            var id = $(this).parent().find("input.adId").val();
            $("#loading").show();
            $.ajax({
                url: contextPath + '/banner',
                type: "POST",
                dataType: 'json',
                data: {
                    action: 'state',
                    id: id
                },
                success: function (rs, textStatus, jqXHR) {
                    if (rs.success) {
                        showMessage(rs.msg);
                        setTimeout(function () {
                            getData(1);
                        }, 1000);
                    } else {
                        showMessage(rs.msg);
                    }
                    $("#loading").hide();
                },
                error: function () {
                    $("#loading").hide();
                    showMessage("请稍后再试");
                }
            });
        });
        $(".del").bind("click", function () {
            var id = $(this).parent().find("input.adId").val();
            $("#loading").show();
            $.ajax({
                url: contextPath + '/banner',
                type: "POST",
                dataType: 'json',
                data: {
                    action: 'delete',
                    id: id
                },
                success: function (rs, textStatus, jqXHR) {
                    if (rs.success) {
                        showMessage(rs.msg);
                        setTimeout(function () {
                            getData(1);
                        }, 1000);
                    } else {
                        showMessage(rs.msg);
                    }
                    $("#loading").hide();
                },
                error: function () {
                    $("#loading").hide();
                    showMessage("请稍后再试");
                }
            });
        });
        //分页
        var pageList = $("#page-list");
        pageList.empty();
        pageList.append(getPageInfo(start, total));
        $("html,body").animate({scrollTop: 0}, 200);
    }


    $("#addAd").bind("click", function () {
        $("#adEditBox").show();
        $("#action").val("add");
        $("#id").val("");
        $("#title").val("");
        $("#info").val("");
        $("input[name='positionLable']:eq(0)").prop("checked", "checked");
        $("input[name='typeLable']:eq(0)").prop("checked", "checked");
        $("#sort").val("1");
        $("#attribute").val("");
        $("#picture").val("");
        $("#img").hide();
        $("#img").attr("src", "");

    });

    $("#cancel").bind("click", function () {
        $("#adEditBox").hide();
        $("#action").val("add");
        $("#id").val("");
        $("#title").val("");
        $("#info").val("");
        $("input[name='positionLable']:eq(0)").prop("checked", "checked");
        $("input[name='typeLable']:eq(0)").prop("checked", "checked");
        $("#sort").val("1");
        $("#attribute").val("");
        $("#picture").val("");
        $("#img").hide();
        $("#img").attr("src", "");
    });

    $("#save").bind("click", function () {
        if ($("#name").val() == "") {
            showMessage("请输入标签名称!!!");
            return;
        }
        if ($("#des").val() == "") {
            showMessage("请输入标签简单描述!!!");
            return;
        }
        if ($("#type").val() == "") {
            showMessage("请输入标签类型!!!");
            return;
        }
        if ($("#code").val() == "") {
            showMessage("请输入标签编码!!!");
            return;
        }
        $("#loading").show();

        $("#adForm").ajaxSubmit({
            type: "POST",
            url: contextPath + '/banner?action=' + $("#action").val(),
            dataType: 'json',
            success: function (data) {
                if (data.success) {
                    showMessage(data.msg);
                    $("#lableEditBox").hide();
                    $("#adEditBox").hide();
                    $("#action").val("add");
                    $("#id").val("");
                    $("#title").val("");
                    $("#info").val("");
                    $("input[name='positionLable']:eq(0)").prop("checked", "checked");
                    $("input[name='typeLable']:eq(0)").prop("checked", "checked");
                    $("#sort").val("1");
                    $("#attribute").val("");
                    $("#picture").val("");
                    $("#img").hide();
                    $("#img").attr("src", "");
                    setTimeout(function () {
                        getData(1);
                    }, 2000);
                } else {
                    showMessage(data.msg);
                }
                $("#loading").hide();
            },
            error: function (msg) {
                $("#loading").hide();
                showMessage("操作失败");
            }
        });
    });




    function bigtoggle(type) {
        if (type=="ad"){
           $("#bigImageDiv").show();
        }else{
            $("#bigImageDiv").hide();
        }
        $("#attribute").val("");
    }
    $("#bigImage").uploadify({
        'auto'           : true,
        'swf'            : '<%=contextPath%>/admin/css/uploadify.swf',
        'uploader'       : '<%=contextPath%>/upload?action=bigImage',
        'queueID'        : 'tip',//与下面的id对应
        'queueSizeLimit' :12,
        'fileTypeDesc'   : '图片文件',
        'fileTypeExts'   : '*.jpg;*.png', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
        'multi'          : true,
        'buttonText'     : '上传' ,
        onUploadSuccess : function(file, data, response) {
            if (response) {
                console.log(data);
                data = JSON.parse(data)

                $("#attribute").val("http://"+data.data);
                alert("大图上传完毕")
            }
        }
    });









</script>
</body>
</html>